<script>
import { defineComponent } from "vue";
import {pageHandler} from '@/mixins/pageHandler'
import RightClickmenuList from "@/components/rightClickmenuList/rightClickMenuList.vue";
import YaokongDialog from "@/components/rightClickmenuList/yaokongDialog.vue";
import GuapaiDialog from "@/components/rightClickmenuList/guapaiDialog.vue";
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import MonitorHeader from "@/components/MonitorHeader/MonitorHeader.vue";
import NetState from "@/components/controls/netState.vue";

export default defineComponent({
  name: "zhubian",
  components: { NetState, MonitorHeader, ScaleBox, GuapaiDialog, YaokongDialog, RightClickmenuList },
  mixins: [pageHandler],
  data() {
    return {
      hardPlatenDataList: [],
      flexiblePlatenDataList: [],
      GZPDataList: [],
      netStateList: [],
      numList:[],
      bashouList:[],
    };
  },
  methods:{
    initData(e){
      const typeMap = {
        "压板": "hardPlatenDataList",
        "网络状态": "netStateList",
        "遥测":'numList',
        "操作把手":"bashouList"
      };

      for (const listName of Object.values(typeMap)) {
        this[listName] = [];
      }
      for (const [key, value] of Object.entries(e)) {
        for (const [type, listName] of Object.entries(typeMap)) {
          const filtered = value.filter(item => item.type === type);
          if (filtered.length > 0) {
            this[listName].push({ name: key, list: filtered });
          }
        }
      }
      this.numList=this.numList.filter(item=> item.name!=='yx'&&item.name!=='重要遥测')
      console.log(this.numList);
    }
  }
});
</script>

<template>
  <div class="breaker-graph" @click="cancelLeftClickMenu" @contextmenu.stop="cancelLeftClickMenu" v-if="pageData">
    <scale-box :width="2320">
      <MonitorHeader :title="$route.query.ftName" >
        <template v-slot:btns>
          <button @click="routerToMainPage">主接线图</button>
          <button @click="">高压侧信号</button>
          <button @click="">中低压侧信号</button>
          <button @click="">保护压板</button>
          <button @click="clearAll($route.query.ftName)">画面清闪</button>
          <button @click="operationRecords">操作记录</button>
        </template>
      </MonitorHeader>
      <main>
        <div class="top">
          <div class="svg"></div>
          <div class="yc">
            <div>
              <div class="remote-measurement-wrapper">
                <div class="remote-measurement-table">
                  <table border="3" cellspacing="0">
                    <caption style="font-size: 20px;margin-bottom: .5rem">{{ numList[0].name }}</caption>
                    <colgroup>
                      <col style="width: 35%;" />
                      <col style="width: 45%;" />
                      <col style="width: 20%;" />
                    </colgroup>
                    <tbody>
                    <tr v-for="(item, index) in numList[0].list" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                      <td :style="{color: 'white'}">{{item.state_desc}}</td>
                      <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                      <td :style="{color: 'white'}">{{item.unit}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="netState-wrapper">
                <div class="netState-list" v-for="item in this.netStateList.slice(0,2)" content="netStateItem">
                  <div class="netTitle">{{item.name}}</div>
                  <net-state :info="items" :state="items.state_val" v-for="items in item.list"></net-state>
                </div>
              </div>
            </div>
            <div>
              <div class="remote-measurement-wrapper">
                <div class="remote-measurement-table">
                  <table border="3" cellspacing="0">
                    <caption style="font-size: 20px;margin-bottom: .5rem">{{ numList[1].name }}</caption>
                    <colgroup>
                      <col style="width: 35%;" />
                      <col style="width: 45%;" />
                      <col style="width: 20%;" />
                    </colgroup>
                    <tbody>
                    <tr v-for="(item, index) in numList[1].list" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                      <td :style="{color: 'white'}">{{item.state_desc}}</td>
                      <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                      <td :style="{color: 'white'}">{{item.unit}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="netState-wrapper">
                <div class="netState-list" v-for="item in this.netStateList.slice(2,4)" content="netStateItem">
                  <div class="netTitle">{{item.name}}</div>
                  <net-state :info="items" :state="items.state_val" v-for="items in item.list"></net-state>
                </div>
              </div>
            </div>
            <div>
              <div class="remote-measurement-wrapper">
                <div class="remote-measurement-table">
                  <table border="3" cellspacing="0">
                    <caption style="font-size: 20px;margin-bottom: .5rem">{{ numList[2].name }}</caption>
                    <colgroup>
                      <col style="width: 35%;" />
                      <col style="width: 45%;" />
                      <col style="width: 20%;" />
                    </colgroup>
                    <tbody>
                    <tr style="height: 2.2rem" v-for="(item, index) in numList[2].list" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                      <td :style="{color: 'white'}">{{item.state_desc}}</td>
                      <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                      <td :style="{color: 'white'}">{{item.unit}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="netState-wrapper">
                <div class="netState-list" v-for="item in this.netStateList.slice(4,5)" content="netStateItem">
                  <div class="netTitle">{{item.name}}</div>
                  <net-state :info="items" :state="items.state_val" v-for="items in item.list"></net-state>
                </div>
              </div>
            </div>
            <div>
              <div class="remote-measurement-wrapper">
                <div class="remote-measurement-table">
                  <table border="3" cellspacing="0">
                    <caption style="font-size: 20px;margin-bottom: .5rem">{{ numList[3].name }}</caption>
                    <colgroup>
                      <col style="width: 35%;" />
                      <col style="width: 45%;" />
                      <col style="width: 20%;" />
                    </colgroup>
                    <tbody>
                    <tr style="height: 2.2rem" v-for="(item, index) in numList[3].list" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                      <td :style="{color: 'white'}">{{item.state_desc}}</td>
                      <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                      <td :style="{color: 'white'}">{{item.unit}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="netState-wrapper">
                <div class="netState-list" v-for="item in this.netStateList.slice(5,6)" content="netStateItem">
                  <div class="netTitle">{{item.name}}</div>
                  <net-state :info="items" :state="items.state_val" v-for="items in item.list"></net-state>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom"></div>
      </main>
    </scale-box>
  <rightClickmenuList v-if="rightMenuObj&&showMenu" :rightMenuObj="rightMenuObj" @menuItemClick="menuItemClick"></rightClickmenuList>
  <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible_0" width="22%" :close-on-click-modal="false">
    <p slot="title" class="el-dialog__title">操作人</p>
    <div class="operatorPwd">
      <div class="operator">
        <label>请输入操作人</label>
        <el-select size="small" v-model="operatorPwdObj.username" style="width: 16rem;">
          <el-option
            v-for="(item,index) in userInfoJson.operatorList"
            :key="index"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </div>
      <div class="pwd">
        <label>请输入密码</label>
        <el-input v-model="operatorPwdObj.pwd" size="small" type="password"   @keydown.enter.native="operatorPwdSubmit_0"></el-input>
      </div>
    </div>
    <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit_0">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible_0 = false">取 消</el-button>
			</span>
  </el-dialog>
  <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible" width="22%" :close-on-click-modal="false">
    <p slot="title" class="el-dialog__title">监护人</p>
    <div class="operatorPwd">
      <div class="operator">
        <label>请输入监护人</label>
        <el-select size="small" v-model="adminPwdObj.username" style="width: 16rem;">
          <el-option
            v-for="(item,index) in userInfoJson.adminList"
            :key="index"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>

      </div>
      <div class="pwd">
        <label>请输入监护员密码</label>
        <el-input v-model="adminPwdObj.pwd" size="small" type="password" @keydown.enter.native="operatorPwdSubmit"></el-input>
      </div>
    </div>
    <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible = false">取 消</el-button>
			</span>
  </el-dialog>
  <el-dialog
    custom-class="switchPatrolDialog"
    :visible.sync="dialogVisible"
    :close-on-press-escape="true"
    :close-on-click-modal="true"
    :width="`40%`"
    :modal="false"
    @before-close="handleDialogClose"
  >

    <!-- 隔离刀 -->
    <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'gelidao'">

      <!-- 遥控 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">遥控</p>
        <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
      </template>

      <!-- 开关清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
        <p slot="title" class="el-dialog__title">开关清闪</p>
      </template>



      <!-- 挂牌/摘牌 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
        <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
        <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
      </template>

      <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>

        <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
        <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>

				</span>
    </template>

    <!-- 地刀 -->
    <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'didao'">
      <!--          遥控-->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">遥控</p>
        <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
      </template>
      <!-- 开关清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 0">
        <p slot="title" class="el-dialog__title">开关清闪</p>
        <span>暂无内容</span>
      </template>

      <!-- 全站清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 4">
        <p slot="title" class="el-dialog__title">全站清闪</p>
        <span>暂无内容</span>
        <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
      </template>
      <!-- 挂牌/摘牌 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 5">
        <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
        <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
      </template>
      <span slot="footer" class="dialog-footer" >
            <!-- 遥控 按钮 -->					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 0" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>


        <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 5" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
    </template>

    <!-- 断路器 -->
    <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'duanluqi'">
      <!-- 遥控 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">遥控</p>
        <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
      </template>
      <!-- 开关清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
        <p slot="title" class="el-dialog__title">开关清闪</p>
        <span>确定要将{{currentSelectMenuItemObj.currentObj.name}}开关清闪吗？</span>
        <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
      </template>
      <!-- 全站清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 3">
        <p slot="title" class="el-dialog__title">全站清闪</p>
        <span>确定要将全部设备进行清闪吗？</span>
        <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
      </template>

      <!-- 挂牌/摘牌 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
        <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
        <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
      </template>
      <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="clearFlesh">确定</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 3" size="small" @click="clearAll">确定</el-button>
        <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>

        <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
    </template>

    <!-- 把手 -->
    <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'bashou'">
      <!-- 操作 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">操作</p>
        <span>暂无内容</span>
      </template>
      <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 2" size="small" @click="dialogVisible = false">取 消</el-button>

				</span>
    </template>



    <template v-if="currentSelectMenuItemObj&&currentSelectMenuItemObj.type=='ruanyaban'">
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">遥控</p>
        <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
      </template>
      <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="dialogVisible = false">取 消</el-button>

        <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
				</span>
    </template>




  </el-dialog>
  <el-dialog ref="operateRecordDialogRef" custom-class="operateRecordDialog" :modal="false" :close-on-click-modal="false" v-if="operationRecordsDialogVisible" :visible.sync="operationRecordsDialogVisible" v-dialogDrag:{dialogDrag}="true" width="35%">
    <p slot="title" class="el-dialog__title">操作记录</p>
    <div class="messageAlarmList">
      <el-table :data="operationRecordsData" width="100%" height="250" >
        <el-table-column prop="num" label="序号" width="85" header-align="center" align="center" >
          <template #default="{row}">
            <span :class="{'is-highlight': !!row.isHighlight}">{{row.num}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="操作时间" width="160" header-align="center" align="center" >
          <template #default="{row}">
            <span :class="{'is-highlight': !!row.isHighlight}">{{row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="log_desc" label="操作描述" header-align="center" >
          <template #default="{row}">
            <span :class="{'is-highlight': !!row.isHighlight}">{{row.log_desc}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</div>
</template>

<style scoped lang="less">
@import "@/assets/css/public";
main {
  height: calc(100% - 90px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #FFFFFF;
  & > div {
    &:nth-of-type(1) {
      width: 100%;
      height: 68%;
    }
    &:nth-of-type(2) {
      width: 100%;
      height: 31%;
    }

  }
}
.top{
    display: flex;
    justify-content: space-between;
  & > div {
    border: 1px solid white;
    &:nth-of-type(1) {
      width: 32%;
      height: 100%;
    }
    &:nth-of-type(2) {
      width: 67%;
      height: 100%;
    }
  }

}
.yc{
  display: flex;
  justify-content: space-between;
  & > div {
    background-color: rgb(24, 61, 94);
    border-radius: 20px;
    width: 24.8%;
  }
}
.netTitle{
  font-size: 15px !important;
}
</style>
